<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <el-menu router active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                    default-active="2" text-color="#fff">
                    <!-- 没有子菜单 -->
                    <el-menu-item :index="item.auth_path" v-for="item in acl" v-show="item.children.length == 0">
                        <el-icon><icon-menu /></el-icon>
                        <span>{{ item.auth_name }}</span>
                    </el-menu-item>
                    <!-- 有子集的 -->
                    <el-sub-menu :index="item.auth_path" v-for="item in acl" v-show="item.children.length !== 0">
                        <template #title>
                            <el-icon>
                                <location />
                            </el-icon>
                            <span>{{ item.auth_name }}</span>
                        </template>
                        <!-- 没有子集 -->
                        <el-menu-item v-for="child in item.children" :index="child.auth_path" v-show="child.is_nav == 1">
                            <el-icon><icon-menu /></el-icon>
                            <span>{{ child.auth_name }}</span>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>

            </el-aside>

            <el-container>
                <el-header>
                    <span>您好</span>

                    <el-button type="primary" style="color: #448ef7;" text @click="dialogVisible = true">
                        注销登录
                    </el-button>
              
                    <el-dialog v-model="dialogVisible" title="提示" width="40%">
                        <span>你要注销登录吗？</span>
                        <el-icon><Warning /></el-icon>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="dialogVisible = false">取消</el-button>
                                <el-button type="primary" @click="loginOut">
                                    确认
                                </el-button>
                            </span>
                        </template>
                    </el-dialog>
           

                </el-header>
                <el-main>
                    
                    <!-- 二级的路由 坑 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import router from '../router';
import {ref} from 'vue'

// 先获取登录时存的
const acl = JSON.parse(localStorage.getItem('acl'))
console.log('acl', acl);

const dialogVisible = ref(false)
// 退出登录
const loginOut = ()=>{
    localStorage.removeItem('jwt')
    localStorage.removeItem('acl')
    router.push('/login')
}

</script>
 
<style scoped>
.logOuttitle{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.common-layout,
.el-aside,
.el-container,
.el-menu {
    height: 100%;
}

.el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: antiquewhite;
}
</style>